<template>
  <div class="container">
    <van-nav-bar title="登录" fixed placeholder :border="false"></van-nav-bar>
    <van-notice-bar
    scrollable
    left-icon="volume-o"
    color="#1989fa" background="#ecf9ff" 
    text="欢迎各位家长来到汕头小学成绩管理登录页面"
  /> 
  <div >
      <van-form
        :model="LoginPerson"
        @submit="goLogin(LoginPerson)"
        :rules="rules"
        ref="LoginForm"
      >
      <van-cell-group>
      <div class="item">
            <van-field
              v-model="LoginPerson.phone"
              label="手机号"
              required
              name="phone"
              right-icon="phone-o"
              native-type="onBlur"
              placeholder="请输入手机号"
              :rules="[{ validator, message: '请输入正确的手机号' }]"
            />
          </div>
          <div class="item">
            <van-field
              v-model="LoginPerson.password"
              label="登录密码"
              required
              name="password"
              right-icon="shield-o"
              native-type="onBlur"
              placeholder="请输入登录密码"
              :rules="[
                { pattern, message: '必须包含一个大小写字母且长度为8到16位' },
              ]"
            />
          </div>
    </van-cell-group>
    <div style="margin: 16px">
          <van-button round block type="primary" native-type="submit">
            登录
          </van-button>
        </div>
  </van-form>
  </div>
  <tab-bar></tab-bar> 
  </div>
 
</template>

<script>
import { Login } from '@/api/api';
import TabBar from '../../components/TabBar/TabBar.vue'
import {ref,reactive,onMounted, onBeforeMount} from 'vue'
import { setToken } from '@/utils/setToken';
import {Toast} from 'vant';
import {useStore} from 'vuex'
import router from "@/router";
export default {
  components: { TabBar },
  setup(){
    // vuex获取实例
    const store = useStore()
    let LoginForm = ref(null);
    let LoginPerson = reactive({
      phone:"",
      password:""
    })
    

    // 校验函数返回 true 表示校验通过，false 表示不通过
    const validator = (val) => /^1[3-9]\d{9}$/.test(val);
    const pattern = /^(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9~!@&%#_]{8,16}$/;
    // 钩子函数
    onMounted(()=>{ 
      // LoginPerson = reactive({...store.state.user})
      LoginPerson.phone = store.state.user.phone
      LoginPerson.password = store.state.user.password
    });
    const goLogin = (LoginPerson)=>{
      // console.log(LoginPerson);
      LoginForm.value.validate().then(()=>{
        // 登录
        Login(LoginPerson).then((res) =>{
          if(res.status === 200){
            // setToken('phone',LoginPerson.phone)
            // setToken('password',LoginPerson.password)
            setToken('token',res.data.token)           
            // MessageMainVue({ type: "success", text: "验证通过~" }); 
            store.commit("setUser",LoginPerson)
            Toast.success(res.message)  
          // 路由跳转
          router.push({
                path: "/list"
              });
          }else{
            Toast.fail('账号不存在，请到首页进行注册')
          }
        })
      }).catch(()=>{
       
        Toast.fail(res.message)
      })
    }
    return{
      LoginForm,
      pattern,
      LoginPerson,
      validator,
      goLogin,
    }
  }
}
</script>

<style lang="less" scoped>
.container{
  width: 100%;
  height: 100%;
  // 定位：子是绝对定位  父是相对定位
  position: fixed; //相对定位
  // position: absolute;//绝对定位
  // display: flex;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin:  auto ;
  // background-color: #409eff;
  background: url('@/assets/image/bg.png') center no-repeat;
  // background-color: pink;
  background-color: skyblue;
  background-size: 100% 100%;
}
</style>